<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :title="title"
    width="70%">
    <el-form :disabled="formDisabled">
      <dynForm
        ref="dataForm"
        :info-form="infoForm"
        :search-tags="searchTags"
        :form-disable="formDisabled"
      />
      <div class="tableContent conditionItems">
        <el-button
          type="success"
          icon="el-icon-plus"

          style="marginBottom: 20px"
          @click="handleConditionItems"
        >{{ $t("add") }}</el-button
        >
        <dynTable
          ref="dynTable"
          :loading="false"
          :table-data="conditionTableData"
          :table-columns="conditionTableColumns"
        />
      </div>
      <div class="tableContent infoItems">
        <el-button
          type="success"
          icon="el-icon-plus"

          style="marginBottom: 20px"
          @click="handleInfoItems"
        >{{ $t("add") }}</el-button
        >
        <dynTable
          ref="dynTable"
          :loading="false"
          :table-data="infoTableData"
          :table-columns="infoTableColumns"
        />
      </div>
    </el-form>
    <span v-show="!formDisabled" slot="footer">
      <el-button

        icon="el-icon-circle-close"
        @click="handleClose"
      >{{ $t("cancel") }}</el-button>
      <el-button
        v-btnThrottle="doSave"
        type="primary"
        icon="el-icon-receiving"

      >{{ $t("save") }}</el-button>
  </span></el-dialog>
</template>

<script>
import { getSelect, doAdd, doUpdate, getDetails } from '@/api/checkManagement/sampleLimit'
export default {
  name: 'SampleEdit',
  data() {
    return {
      dialogVisible: false,
      formDisabled: false,
      title: '',
      infoForm: {
        status: 0
      },
      searchTags: Object.freeze([
        { label: this.$t('iseffective'), prop: 'status', tag: 'DynSwitch' }
      ]),
      matchingFactorList: [], // 匹配因素
      conditionTableData: [],
      conditionTableColumns: Object.assign([
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ _scope.$index + 1} </span>
          )
        } },
        { prop: 'type', label: this.$t('matchingFactor'), templete: (_scope) => {
          return (
            <el-select vModel={_scope.row.type} clearable size='small' filterable >
              {this.matchingFactorList.map(item => {
                return (
                  <el-option label={item.name} value={item.id}
                    disabled={this.isDisable.includes(item.id)}
                  ></el-option>
                )
              })}
            </el-select>
          )
        } },
        { prop: 'value', label: this.$t('matchValue'), templete: (_scope) => {
          return (
            <el-input clearable v-model={_scope.row.value} size='small'>
            </el-input>
          )
        } },
        { prop: 'status', label: this.$t('iseffective'), templete: (_scope) => {
          return <el-switch
            v-model={_scope.row.status}
            active-value={1}
            inactive-value={0}
            active-color='#13ce66'
            inactive-color='#ff4949'/>
        } },
        { prop: '', label: this.$t('operation'), templete: (_scope) => {
          return (
            <el-link type='primary' underline={false} disabled={this.formDisabled}
              on-click={() => this.doConditionDelete(_scope.$index)}>{this.$t('delete')}</el-link>
          )
        } }
      ]),
      infoTableData: [],
      infoTableColumns: Object.assign([
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ _scope.$index + 1} </span>
          )
        } },
        { prop: 'sampleID', label: this.$t('sampleTubeNumber'), templete: (_scope) => {
          return (
            <el-input clearable v-model={_scope.row.sampleID} size='small'>
            </el-input>
          )
        } },
        { prop: 'binNo', label: this.$t('binNumber'), templete: (_scope) => {
          return (
            <el-input clearable v-model={_scope.row.binNo} size='small'>
            </el-input>
          )
        } },
        { prop: 'sampleItemName', label: this.$t('sampleItemName'), templete: (_scope) => {
          return (
            <el-input clearable v-model={_scope.row.sampleItemName} size='small'>
            </el-input>
          )
        } },
        { prop: 'max', label: this.$t('upperLimit'), templete: (_scope) => {
          return (
            <el-input clearable v-model={_scope.row.max} size='small'>
            </el-input>
          )
        } },
        { prop: 'containMax', label: this.$t('includesUpperLimit'), templete: (_scope) => {
          return <el-switch
            v-model={_scope.row.containMax}
            active-value={1}
            inactive-value={0}
            active-color='#13ce66'
            inactive-color='#ff4949'/>
        } },
        { prop: 'min', label: this.$t('lowerLimit'), templete: (_scope) => {
          return (
            <el-input clearable v-model={_scope.row.min} size='small'>
            </el-input>
          )
        } },
        { prop: 'containMin', label: this.$t('includesLowerLimit'), templete: (_scope) => {
          return <el-switch
            v-model={_scope.row.containMin}
            active-value={1}
            inactive-value={0}
            active-color='#13ce66'
            inactive-color='#ff4949'/>
        } },
        { prop: 'status', label: this.$t('iseffective'), templete: (_scope) => {
          return <el-switch
            v-model={_scope.row.status}
            active-value={1}
            inactive-value={0}
            active-color='#13ce66'
            inactive-color='#ff4949'/>
        } },
        { prop: '', label: this.$t('operation'), templete: (_scope) => {
          return (
            <el-link type='primary' underline={false} disabled={this.formDisabled}
              on-click={() => this.doInfoItemsDelete(_scope.$index)}>{this.$t('delete')}</el-link>
          )
        } }
      ])
    }
  },
  computed: {
    isDisable() {
      return this.conditionTableData
        .filter(
          ele => ele.type !== '' && ele.type !== null
        ).map(item => item.type)
    }
  },
  methods: {
    handleOpen(row, disable = false) {
      if (row && row.id) {
        if (disable) {
          this.formDisabled = disable
          this.title = this.$t('details')
        } else {
          this.title = this.$t('modify')
        }
        getDetails({ id: row.id }).then(res => {
          const { infoItems, conditionItems, ...obj } = res.data
          this.infoTableData = infoItems
          this.conditionTableData = conditionItems
          this.infoForm = obj
        })
      } else {
        this.title = this.$t('add')
      }
      this.getMatchingFactorList()
      this.dialogVisible = true
    },
    doSave() {
      if (this.infoTableData.length && this.conditionTableData.length) {
        if (this.infoForm.id) {
          // edit
          doUpdate({ ...this.infoForm, infoItems: this.infoTableData, conditionItems: this.conditionTableData })
            .then(res => {
              this.$betterTips(res, this.handleClose, this.handleUpdate)
            })
        } else {
          doAdd({ ...this.infoForm, infoItems: this.infoTableData, conditionItems: this.conditionTableData })
            .then(res => {
              this.$betterTips(res, this.handleClose, this.handleUpdate)
            })
        }
      } else {
        this.$notify.error({
          title: '错误',
          message: '数据请填写完整',
          duration: 0
        })
      }
    },
    handleConditionItems() {
      this.conditionTableData.push({})
    },
    handleInfoItems() {
      this.infoTableData.push({})
    },
    doConditionDelete(index) {
      this.conditionTableData.splice(index, 1)
    },
    doInfoItemsDelete(index) {
      this.infoTableData.splice(index, 1)
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    handleUpdate() {
      this.$emit('initList')
    },
    // 获取匹配因素下拉框
    async getMatchingFactorList() {
      const res = await getSelect({ enumName: 'SampleCondition', isDescription: 1 })
      this.matchingFactorList = res.data
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-form {
    .el-form-item {
         width: 48%;
         .el-form-item__content{
             width: calc(100% - 120px);
             .el-select{
                 width: 100%;
             }
         }
    }
}
.tableContent {
    padding: 20px 0;
}
</style>
